<!-- <template>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :hideRequiredMark="true">
          <a-form-item label="账号" v-bind="validateInfos.userName" class="one1" >
            <a-input   v-model:value="modelRef.userName" @blur="validate('userName', { trigger: 'blur' }).catch(() => { })" />
          </a-form-item>
          <a-form-item label="密码" name="password" v-bind="validateInfos.password" class="one2"
            @blur="validate('password', { trigger: 'blur' }).catch(() => { })">
            <a-input-password v-model:value="modelRef.password" />
          </a-form-item>
          <a-form-item v-bind="validateInfos.captcha" class="one2" >
            <a-input v-model:value="modelRef.captcha" @blur="validate('auth', { trigger: 'blur' }).catch(() => { })"
              class="inputauth" />
            <img :src="src" alt="" class="authimg" @click="fun1">
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 5 }" >
            <a-button :disabled="disabled" type="primary" @click.prevent="onSubmit">登录</a-button>
          </a-form-item>
        </a-form>
  </template>
  <script lang="ts">
  import { defineComponent, reactive, toRaw, computed, ref, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { AuthCode, LoginData, jwtPreCheck } from '@/api/login'
  import { useRouter } from 'vue-router'
  const useForm = Form.useForm;
  export default defineComponent({
    components:{
    },
    setup(props,ctx) {
      const modelRef = reactive({
        userName: '',
        password: '',
        captcha: "",
        key: '',
        src: ""
      });
      let src = ref('')
      const router = useRouter()
      //定义验证码的点击切换
      const fun1 = () => {
        CaptchaData()
      }
      const rulesRef = reactive({
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: 'blur',
            // pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/
          }
        ],
        password: [
          {
            required: true,
            message: '请输入正确的密码',
            pattern: /^\d+$/,
            trigger: 'blur',
            min: 8,
          }
        ],
        captcha: [
          {
            required: true, message: '请输入正确的图片验证码',
          }
        ]
      });
      //@ts-ignore 忽略ts检查
      const CaptchaData = () => {
        AuthCode().then(res => {
          // console.log('res',res);
          //@ts-ignore 忽略ts检查
          console.log('res',res);
          //@ts-ignore 忽略ts检查
          src.value = res.img
          //@ts-ignore 忽略ts检查
          modelRef.key = res.key
          modelRef.src = src.value
        })
      }
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
      const onSubmit = () => {
        validate()
          .then(() => {
            LoginData(modelRef).then(res => {
              console.log(res);
              //@ts-ignore 忽略ts检查
              modelRef.captcha = res.captcha
              //@ts-ignore 忽略ts检查
              if (res.errNo == 0) {
                router.push('/layout/home')
                 localStorage.setItem('jwt',JSON.stringify(modelRef.key))
                //  console.log('acl',localStorage.getItem('acl'));
              } else {
                modelRef.captcha = ''
                CaptchaData()
              }
            })
          })
          .catch((err: any) => {
            console.log('error', err);
          });
      };
      const disabled = computed(() => {
        return !(modelRef.userName && modelRef.password && modelRef.captcha);
      });
      onMounted(() => {
        CaptchaData()
      })
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        validate,
        validateInfos,
        resetFields,
        modelRef,
        src,
        disabled,
        onSubmit,
        fun1,
      };
    },
  });
  </script>
  <style scoped lang="less">
  .one1{
  margin-top: 0px;
  margin-left: 60px;
}
.one2{
  margin-left: 60px;
}
.inputauth {
  position: absolute;
  top: 0px;
  left: 35px;
  width: 195px;
}

.ant-row ant-form-item {
  text-align: center;
}

.ant-btn {
  margin: 0px -25px;
  background-color: #1890ff;
  position: absolute;
  top: 0px;
  left: 15px;
  color: black;
  width: 295px;
}

.ant-btn:hover {
  background-color: rgb(255, 0, 247);
  color: rgb(246, 222, 5);
}

.authimg {
  position: absolute;
  right: -73px;
  top: 0px;
  width: 100px;
}
</style> -->
<template>
  <div class="divimg">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :hideRequiredMark="true">
    <a-form-item label="账号" v-bind="validateInfos.userName" class="one1" >
      <a-input   v-model:value="modelRef.userName" @blur="validate('userName', { trigger: 'blur' }).catch(() => { })" />
    </a-form-item>
    <a-form-item label="密码" name="password" v-bind="validateInfos.password" class="one2"
      @blur="validate('password', { trigger: 'blur' }).catch(() => { })">
      <a-input-password v-model:value="modelRef.password" />
    </a-form-item>
    <a-form-item v-bind="validateInfos.captcha" class="one2" >
      <a-input v-model:value="modelRef.captcha" @blur="validate('auth', { trigger: 'blur' }).catch(() => { })"
        class="inputauth" />
      <img :src="src" alt="" class="authimg" @click="cut">
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 5 }" >
      <a-button :disabled="disabled" type="primary" @click.prevent="onSubmit" class="button">登录</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw, computed, ref, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import { AuthCode, LoginData, jwtPreCheck } from '@/api/login'
const useForm = Form.useForm;
export default defineComponent({
components:{
},
setup(props,ctx) {
const modelRef = reactive({
  userName: '',
  password: '',
  captcha: "",
  key: '',
  jwt:'',
  arr:[],
});
let acl = []
let src = ref('')
const router = useRouter()
const rulesRef = reactive({
  userName: [
    {
      required: true,
      message: "请输入账号",
      trigger: 'blur',
    }
  ],
  password: [
    {
      required: true,
      message: '请输入正确的密码',
      pattern: /^\d+$/,
      trigger: 'blur',
      min: 8,
    }
  ],
  captcha: [
    {
      required: true, message: '请输入正确的图片验证码',
    }
  ]
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
let jwt1 = ref('')
let jwt2 = ref('')
const onSubmit = () => {
  validate()
    .then(() => {
      LoginData(modelRef).then(res=>{
         //@ts-ignore 忽略ts检查
         jwt1.value = res.context.jwt
         //@ts-ignore 忽略ts检查
         //  console.log('res',res);
          //@ts-ignore 忽略ts检查
          modelRef.jwt = res.context.jwt
          //@ts-ignore 忽略ts检查
         jwt2.value = modelRef.jwt
         //@ts-ignore 忽略ts检查
          localStorage.setItem('jwt',res.context.jwt)
          //@ts-ignore 忽略ts检查
          acl =res.context.acl 
          //@ts-ignore 忽略ts检查
          localStorage.setItem('acl',JSON.stringify(res.context.acl))
          modelRef.arr = acl
          resetFields()
          immediately()
          //@ts-ignore 忽略ts检查
          if(res.errNo == 0){
            jwtPreCheck().then(res=>{
              if(jwt1.value =jwt2.value ){
                  router.push('/layout/home')
              }else{
                alert("请输入正确的账号和密码")
              }
            })
          }
 
      })
    })
    .catch((err: any) => {
      console.log('error', err);
    });
};
const disabled = computed(() => {
  return !(modelRef.userName && modelRef.password && modelRef.captcha);
});
 //验证码图片
const immediately=()=>{
  AuthCode().then(res=>{
      //  console.log('res',res);
         //@ts-ignore 忽略ts检查
         src.value = res.img
        //@ts-ignore 忽略ts检查
        modelRef.key = res.key
  })
}
//验证码切换图片
const cut =()=>{
  immediately()
}
onMounted(() => {
  immediately()
})
return {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
  validateInfos,
  modelRef,
  src,
  disabled,
  validate,
  resetFields,
  cut,
  onSubmit,
};
},
});
</script>
<style scoped lang="less">

// .one1{
// margin-top: 0px;
// margin-left: 60px;
// }
// .one2{
// margin-left: 60px;
// }
// .inputauth {
// position: absolute;
// top: 0px;
// left: 15px;
// width: 140px;
// }

// .ant-row ant-form-item {
// text-align: center;
// }

// .ant-btn {
// margin: 0px -25px;
// background-color: #1890ff;
// position: absolute;
// top: 0px;
// left: 15px;
// color: black;
// width: 295px;
// }

// .ant-btn:hover {
// background-color: rgb(255, 0, 247);
// color: rgb(246, 222, 5);
// }

// .authimg {
// position: absolute;
// right: -55px;
// top: 0px;
// width: 100px;
// }
// .button{
//  width: 237px;
// }
.one1{
  margin-top: 0px;
  margin-left: 60px;
}
.one2{
  margin-left: 60px;
}
.inputauth {
  position: absolute;
  top: 0px;
  left: 35px;
  width: 195px;
}

.ant-row ant-form-item {
  text-align: center;
}

.ant-btn {
  margin: 0px -25px;
  background-color: #1890ff;
  position: absolute;
  top: 0px;
  left: 15px;
  color: black;
  width: 295px;
}

.ant-btn:hover {
  background-color: rgb(255, 0, 247);
  color: rgb(246, 222, 5);
}

.authimg {
  position: absolute;
  right: -73px;
  top: 0px;
  width: 100px;
}
</style>